<template>
    <view class="content">
        <van-nav-bar :title="title" left-arrow @click-left="onClickLeft" id="navBar"> </van-nav-bar>
        <!-- <loading :loadingIsShow="loadingIsShow"></loading> -->
        <view class="main-container">

            <scroll-view :refresher-enabled="false" class="scroll-content" @scroll="scrollPage" scroll-y
                :lower-threshold="120" show-scrollbar="false">

                <view class="scroll-box">
                    <view class="overallEvaluation">
                        <view class="boxLabel"> 评价详情 </view>
                        <view class="userJudge_content">
                            <!-- 用户评论 -->
                            <template>
                                <view class="judgeContainer">
                                    <view class="judgeContainerBg judgeBox">
                                        <view class="icon">
                                            <van-rate :value="commentData.rating" readonly size="30" color="#FF9C00" void-icon="star" void-color="#eee"/>
                                        </view>
                                        <view class="user_judge_date t18">{{  commentData.publishTime }}  </view>
                                        <view class="judge_item">{{ commentData.content }} </view>
                                        <view class="judge_img"
                                            v-if="commentData.imageUrls && commentData.commentImgUrls.length > 0">
                                            <view class="judge_img_item"
                                                v-for="(i, j) in commentData.commentImgUrls" :key="j">
                                                <img :src="i" alt="" mode="widthFix" />
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </template>
                        </view>
                    </view>
                    <view class="replyDetails"  v-if="replyData">
                        <view class="boxLabel"> 回复详情 </view>
                        <view class="reply_content judgeBox">
                            <view class="user_judge_date">{{ replyData.publishTime}} </view>
                            <view class="judge_item">{{ replyData.replyContent }}</view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>

    </view>
</template>
  
<script>
import { topStyleWhite, topStyleBlack } from '@/utils/topColor'
import {timeFormatDay,timeFormat } from '@/utils/public'

import { commentInfoApi } from '@/api/service'
import {getCommentDetailApi} from '@/api/judge'

export default {
    components: {

    },
    data () {
        return {
            
            title: '查看评价',
            scrolling:false,  //吸顶效果
            commentData:{},  //评论信息
            userJudgeData: {
                replyImages:[],
                attachment: "",
                content: "服务周到、仔细、认真、负责。。。",
                currentUserFollow: false,
                currentUserLike: false,
                id: "168920376645128192",
                likeCount: 0,
                publishTime: "2025-04-11 11:09:16",
                stars: "5",
                status: "publish",
                uid: "",
            }, //用户评价信息
            replyData:{
                content: "3_222222222222",
                id: 110,
                level: 1,
                parentId: 0,
                path: ",0,",
                publishTime: "2025-04-11 14:39:32",
                targetId: "168920376645128192",
                uid: 2
            },
            valueStar:5,  //评价星级

            userJudgeList: [ //用户评价列表
                // {
                //     ebStoreProductReply: {
                //         // userImg: require('../../static/judge/user.png'),
                //         avatar: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my/info.png',
                //         nickname: 'a***aw',
                //         createTime: '2024-04-11 20:30',
                //         comment: '阿姨厨艺精湛，择菜、洗菜都很利索，做的饭菜色香味俱全，做晚饭还把厨房收拾的很干净aaaaaaaaa做的饭菜色香味俱全，做晚饭还把厨房收拾的很干净',
                //         pics: [
                //             'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png',
                //             'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge03.png',
                //             'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge03.png'
                //         ],
                //         zhuipingList: [{
                //             followUpTime: '2024-04-12 10:30',
                //             followUpComment: '配料有当归 枸杞 黄芪 红枣等，真材实料～吃了一段时间,配料有当归 枸杞 黄芪 红枣等，真材实料～吃了一段时间',
                //             followUpPics: [
                //                 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png',
                //             ],
                //         }],
                //         followUpComment: '配料有当归 枸杞 黄芪 红枣等，真材实料～吃了一段时间,配料有当归 枸杞 黄芪 红枣等，真材实料～吃了一段时间',
                //         followUpPics: [
                //             'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png'
                //         ],
                //         followUpIsReply: null,
                //         followUpReplyContent: null,
                //         followUpReplyTime: null,
                //         followUpTime: '2024-04-12 10:30',
                //     },
                //     productReplyLikesNum: 0,
                //     replyLikes: false,
                // }, 
                // {
                //     ebStoreProductReply: {
                //         // userImg: require('../../static/judge/user.png'),
                //         avatar: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my/info.png',
                //         nickname: "A***rew",
                //         createTime: "2023-10-02",
                //         comment: '配料有当归 枸杞 黄芪 红枣等，真材实料～吃了一段时间,配料有当归 枸杞 黄芪 红枣等，真材实料～吃了一段时间',
                //         pics: [
                //             'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png',
                //             'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge03.png',
                //             'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge03.png'
                //         ],
                //         zhuipingList: [{
                //             followUpTime: '2023-04-12 20:30',
                //             followUpComment: '配料有当归 枸杞 黄芪 红枣等，真材实料～吃了一段时间,配料有当归 枸杞 黄芪 红枣等，真材实料～吃了一段时间',
                //             followUpPics: [
                //                 // { imgurl: require('../../static/shangcheng/judge02.png') },
                //             ]
                //         }],
                //         followUpComment: '配料有当归 枸杞 黄芪 红枣等，真材实料～',
                //         followUpIsReply: null,
                //         followUpPics: null,
                //         followUpReplyContent: null,
                //         followUpReplyTime: null,
                //         followUpTime: '2024-02-01 20:30',
                //     },
                //     productReplyLikesNum: 0,
                //     replyLikes: false,
                // }

            ],
            params:{},
            productId:undefined,
            isFollowUp: undefined,
            isPic: undefined,
            sortField:'comprehensive',  //排序类型，综合（comprehensive）、最新（last）、回头客（repeatBuy）
            timeDiffResult:'',
            replyId:undefined,
            commentId:undefined, //服务评价id
        }
    },
    computed: {
        preCalculatedTimeDiff() {
            return this.timeDiffResult; // 在模板中直接使用提前计算好的结果
        }
    },
    filters: {
        timeFormatDay(time1) {
            console.log('time1', time1)
            return timeFormatDay(time1)
        },
        timeFormat(time1){
            console.log('time1', time1)
            return timeFormat(time1)
        },
        formatDateSE(timeStr) {
            console.log(timeStr,'timeStr')
            if (timeStr !== null && timeStr !== undefined) {
                // const timeA=timeStr.replace(/-/g, '/')
                const timeStrss = timeStr.replace('+0000', '');
                const date = new Date(timeStrss);
                const year = date.getFullYear();
                const month = ("0" + (date.getMonth() + 1)).slice(-2);
                const day = ("0" + date.getDate()).slice(-2);
                const weekDay = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"][date.getDay()];
                const hours = ("0" + date.getHours()).slice(-2);
                const minutes = ("0" + date.getMinutes()).slice(-2);
                const formatDate = `${year}.${month}.${day}  ${hours}:${minutes}`
                return formatDate;
            } else {
                console.error('传入的startTime格式不正确，期望为合法数字类型的时间戳');
                return ''
            }

        },

        toimg(text) {
            return weixinMojiTranslate(text)
        }
    },
    onLoad (data) {
    // 取到路由携带的参数
        if (data != null) {
            this.params = JSON.parse(decodeURIComponent(data.params))
            console.log(JSON.parse(decodeURIComponent(data.params)))
            console.log('params', this.params)
            this.commentId=this.params.replyId
        }
    },
    onReady () {
        // const abnormal = this.getAbnormalDetailsMethod()
        // Promise.all([abnormal]).then(() => {
        //     console.log('所有api加载完成')
        //     this.loadingIsShow = false
        // })

    },
    
    onShow(){
        this.getCommentDetail(this.commentId)
    },
    methods: {

        // scrolltolower () {
        //     if (this.totalPage <= this.contentData.length) {
        //         this.isLoadAll = true
        //         this.biaozhi = 0
        //         this.loadingText = '没有更多数据啦~'
        //     } else {
        //         this.abnormalDetailsParamas.pageNum++
        //         this.isLoadAll = true
        //         this.loadingText = '加载中...'
        //         this.biaozhi = 1
        //         this.getAbnormalDetailsMethod()
        //     }
        // },

        // 互动页面
        scrollPage(e) {
            // console.log(e.detail.scrollTop, this.scrolling)
            // if (e.detail.scrollTop > 1 && !this.scrolling) {
            //     this.scrolling = true
            // } else if ((e.detail.scrollTop <= 1 && this.scrolling) || (e.detail.scrollTop <= 1 && !this.scrolling)) {
            //     this.scrolling = false
            // }
        },

        formatDateSE(timeStr) {
            console.log(timeStr, 'timeStr')
            if (timeStr !== null && timeStr !== undefined) {
                const date = new Date(timeStr);
                const year = date.getFullYear();
                const month = ("0" + (date.getMonth() + 1)).slice(-2);
                const day = ("0" + date.getDate()).slice(-2);
                const hours = ("0" + date.getHours()).slice(-2);
                const minutes = ("0" + date.getMinutes()).slice(-2);
                const seconds = ("0" + date.getSeconds()).slice(-2);
                const formatDate = `${year}.${month}.${day} ${hours}:${minutes}:${seconds}`;
                return formatDate;
            } else {
                console.error('传入的时间格式不正确，期望为合法的时间字符串');
                return '';
            }
        },
        // 返回按钮
        onClickLeft () {
            uni.navigateBack()
        },

        // 是否为null
        areAllNull(...args) {
            return args.every(arg => arg === null);
        },

        // 都不为null
        notAreAllNull(...args) {
            return args.every(arg => arg !== null);
        },


        // 判断是否有图片
        handleImages(pics) {
            // 判断追评中是否有图片的逻辑
            let isPics;
            if (pics !== null && pics !== '' && pics !== undefined) {
                isPics = true;
                // if (typeof (pics) === 'string') {
                //     pics = JSON.parse(pics);
                // }
            } else {
                isPics = false;
            }
            return isPics;
        },

        // // 服务评价信息
        // getCommentInfo(){
        //     commentInfoApi({
        //         commentId:this.commentId
        //     }).then((res)=>{
        //         console.log(res)
        //         if(res.code===200){
        //             this.userJudgeData=res.data.post // 存储用户评价信息
        //             this.userJudgeData.replyImages = res.data.post.attachment.split(',')
        //             this.replyData = res.data.comment // 存储回复数据
        //         }
        //     })
        // },
        getCommentDetail(commentId){
            getCommentDetailApi( commentId).then((res)=>{
                console.log(res)
                if(res.code===200){
                    this.commentData=res?.data?.commentInfo?.mpComment || null // 存储评论信息
                    this.commentData.publishTime = this.formatDateSE( this.commentData.createTime)
                    this.commentData.commentImgUrls = this.commentData.imageUrls.split(',') || []
                    // this.commentData.replyImages = res.data?.commentImgUrls.split(',') || []
                    this.replyData = res?.data?.comment || null // 存储回复数据
                }
            })
        }
      

    }
}
</script>
    
<style lang="scss" scoped>
.content {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100vh;
    overflow: hidden;
    z-index: -2;
    background-color: #f9f9f9;
    background-size: 100%;

}

.main-container {
    // background: white;
    background-color: #f9f9f9;
    // box-shadow: 0px 4px 10px rgba(61, 92, 153, 0.1);
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    // padding-bottom: 64px;
}


// 滚动
.scroll-content {
    flex: 1;
    height: 1px;
}

.scroll-box {
    height: 100vh;
    background: #ffffff;
}

// 评价星级
.overallEvaluation{
    padding-top:40rpx;
}
.boxLabel{
    color: #333333;
    font-size: 36rpx;
    font-weight: bold;
    padding: 0rpx 48rpx;
}
.icon{
    display: flex;
    height: 60rpx;
    align-items: center;
    // margin-top: 26rpx;
    // padding: 0rpx 48rpx;
}

.userJudge_content {
    position: relative;
    // padding-bottom: 12px;

    .judgeContainer {
        background: #efefef;
        padding-bottom: 4rpx;   //每一个评论中间的灰色

        .judgeContainerBg{
            background: #ffffff;
            padding: 32rpx 48rpx 40rpx 48rpx;
        }
        // 第一次评价


        // 评价人的信息 时间
        // .user_judge_top {
        //     display: flex;
        //     flex-direction: column;

        //     .user_info {
        //         display: flex;
        //         margin-bottom: 12px;

        //         .user_img {
        //             height: 48px;
        //             line-height: 48px;

        //             img {
        //                 width: 48px;
        //                 height: 48px;
        //             }
        //         }

        //         .user_nicheng {
        //             font-weight: bolder;
        //             font-size: 14px;
        //             line-height: 48px;
        //             text-align: left;
        //             color: #111111;
        //             margin-left: 13px;
        //         }

        //     }

        // }



    }

    // .judgeContainer:last-child {
    //     margin-bottom: 0px;
    // }
}

// 回复内容
.replyDetails{
    padding-top: 40rpx;
}
.reply_content{
    padding: 32rpx 48rpx 40rpx 48rpx;
}
.judgeBox {

    .user_judge_date {
        font-size: 24rpx;
        text-align: left;
        color: #999999;
        line-height: 24rpx;
    }

    // 评价内容的文字
    .judge_item {
        color: #333333;
        font-size: 32rpx;
        text-align: left;
        // line-height: 12px;
        max-width: 100%;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;

        margin-top: 16rpx;
    }

    // 评价内容的三张图
    .judge_img {
        display: flex;
        width: 100%;
        align-items: center;
        margin-top: 24rpx;
        // margin-bottom: 24rpx;
        border-radius: 12rpx;

        .judge_img_item {
            width: 33%;
            margin-right: 3px;
        }

        .judge_img_item:last-child {
            margin-right: 0px;
        }

        img {
            width: 100%;
            border-radius: 12rpx;
        }
    }

    // 追评
    .follow-up-review {}

    // 追评内容上方的横线
    .line {
        height: 2px;
        width: 100%;
        background: #f0f0f0;
    }

    // 追评时间
    .reviewDate {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 12px;
        height: 14px;
        line-height: 14px;

        .today {
            // font-weight: bolder;
            font-size: 14px;
            text-align: left;
            color: #FF6203;
            line-height: 14px;
        }
    }

    // 浏览量 + 点赞
    .liulan {
        line-height: 13px;
        height: 13px;
        // padding-top: 13px;
        padding-bottom: 13px;

        .user_act {
            float: right;
            display: flex;
            align-items: center;

            img {
                width: 15px;
                height: 13px;
            }

            .liulan_left {
                display: flex;
                margin-right: 17px;
                //line-height: 13px;
                align-items: center;
            }

            .liulan_right {
                display: flex;
                //line-height: 13px;
                align-items: center;
            }

            .num {
                margin-right: 7px;
                font-size: 11px;
                line-height: 11px;
                text-align: right;
                color: #666666;
            }
        }

    }
}
.loading {
    text-align: center;
    /* height: 40px; */
    margin-top: 16px;
    color: #242629;
    // font-weight: 400;
    font-size: 14px;
}

::v-deep .van-nav-bar__left {
    width: 56px;
    height: 44px;
}

::v-deep #navBar .van-icon {
    color: #242629 !important;
}

::v-deep .van-nav-bar__title {
    font-size: 14px;
    color: #333333;
}

::v-deep .van-empty {
    background: transparent;
    border-radius: 12px;
}

::v-deep .van-empty__image {
    width: 164px;
    height: 164px;
}
::v-deep .van-rate{
    font-size: 60rpx;
    line-height: 60rpx;
}
::v-deep .van-rate__icon{
    font-size: 60rpx;
    line-height: 60rpx;
}

.pl15 {
    padding-left: 15px;
}

.b12 {
    margin-bottom: 12px;
}

.t12 {
    margin-top: 12px;
}
.t18{
    margin-top: 18rpx;
}
</style>
    